<template>
  <div class="module">
    <div class="title">交易大类分布</div>
    <div class="content">
      <div class="top">
        <el-radio-group
          v-model="statisticsRadio1"
          size="mini"
          border="true"
          @change="statisticsRadio1Fn"
        >
          <el-radio-button label="P">买入</el-radio-button>
          <el-radio-button label="S">卖出</el-radio-button>
        </el-radio-group>
        <el-radio-group
          v-model="statisticsRadio2"
          size="mini"
          border="true"
          style="margin-left: auto"
          @change="statisticsRadio2Fn"
        >
          <el-radio-button label="今年以来"></el-radio-button>
          <el-radio-button label="近一年"></el-radio-button>
          <el-radio-button label="近三年"></el-radio-button>
          <el-radio-button label="全部"></el-radio-button>
        </el-radio-group>
        <div style="margin-left: 10px">
          <el-date-picker
            v-model="value1"
            type="monthrange"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            @change="datePickerChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="table_echarts">
        <el-row>
          <el-col :span="13">
            <div class="table">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column
                  prop="tradeType"
                  label="交易大类"
                  width="80px"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="tradeCount"
                  label="笔数(笔)"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="countProportion"
                  label="笔数占比"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="tradeAmount" label="金额" align="center">
                </el-table-column>
                <el-table-column
                  prop="moneyProportion"
                  label="金额占比"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="pie_echarts">
              <div id="pie1"></div>
              <div id="pie2"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import * as echarts from 'echarts';
import {
  getTradeInfoByTradeTypeTotal,
  getTradeInfoByTradeType,
} from '@/api/customerManagement/tradeInformation';
export default {
  data() {
    return {
      statisticsRadio1: 'P',
      statisticsRadio2: '今年以来',
      startDate: '',
      endDate: moment().format('YYYYMMDD'),
      tableData: [],
      value1: '',
      pieStrokeCount: [],
      pieAmountProportion: [],
      customerId: '',
      datePicker: '',
    };
  },
  mounted() {
    this.customerId = this.$route.query.customerId;
    this.statisticsRadio2Fn();
  },
  methods: {
    async statisticsRadio1Fn(value) {
      this.statisticsRadio1 = value;
      this.integrationData()
    },
    pie1Init() {
      let chartDom = document.getElementById('pie1');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: 'item',
        },
        label: {
          formatter: (value) => {
            console.log('formatter', value);
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.tableData.length
              ? this.tableData.map((item) => {
                  return {
                    value: item.tradeCount,
                    name: item.tradeType,
                  };
                })
              : [0, 0, 0, 0, 0],
            itemStyle: {
              // 为每一块设置颜色
              normal: {
                color: function (params) {
                  // 自定义颜色
                  var colorList = [
                    '#fff',
                    '#08b0f0',
                    '#ffff03',
                    '#f4b183',
                    '#a9d18e',
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    pie2Init() {
      let chartDom = document.getElementById('pie2');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.tableData.length
              ? this.tableData.map((item) => {
                  return {
                    value: item.tradeAmount || 0,
                    name: item.tradeType,
                  };
                })
              : [0, 0, 0, 0, 0],
            itemStyle: {
              // 为每一块设置颜色
              normal: {
                color: function (params) {
                  // 自定义颜色
                  var colorList = [
                    '#fff',
                    '#08b0f0',
                    '#ffff03',
                    '#f4b183',
                    '#a9d18e',
                  ];
                  return colorList[params.dataIndex];
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    async statisticsRadio2Fn(value = '今年以来') {
      const today = moment();
      switch (value) {
        case '今年以来':
          // 获取一年前的日期
          const YearAgo = today.startOf('years').format('YYYYMMDD');
          this.startDate = YearAgo;
          break;
        case '近一年':
          // 获取一年前的日期
          const oneYearAgo = today.subtract(1, 'years').format('YYYYMMDD');
          this.startDate = oneYearAgo;
          break;
        case '近三年':
          // 获取一年前的日期
          const threeYearAgo = today.subtract(3, 'years').format('YYYYMMDD');
          this.startDate = threeYearAgo;
          break;
        case '全部':
          this.startDate = '';
          this.endDate = '';
          break;
        default:
          break;
      }
      this.integrationData();
    },
    async getTradeInfoByTradeTypeData() {
      const params = {
        counterpartyId: this.customerId,
        tradeDirection: this.statisticsRadio1,
        startDate: this.startDate,
        endDate: this.endDate,
        tradeType:''
      };
      const {
        data: { records },
      } = await getTradeInfoByTradeType(params);
      return records;
    },
    async getTradeInfoByTradeTypeTotalData() {
      const params = {
        counterpartyId: this.customerId,
        tradeDirection: this.statisticsRadio1,
        startDate: this.startDate,
        endDate: this.endDate,
        tradeType:''
      };
      const {
        data: { records },
      } = await getTradeInfoByTradeTypeTotal(params);
      return records;
    },
    async integrationData() {
      const [data1, data2] = await Promise.all([
        this.getTradeInfoByTradeTypeData(),
        this.getTradeInfoByTradeTypeTotalData(),
      ]);
      this.tableData = data1
        .map((item) => {
          return {
            ...item,
            countProportion: item.tradeCount / data2[0].tradeCountTotal,
            moneyProportion: item.tradeAmount / data2[0].tradeAmountTotal,
          };
        })
        .slice(0, 5);
      this.pie1Init();
      this.pie2Init();
    },
    datePickerChange(date) {
      if (!date) return;
      this.startDate = moment(date[0]).format('YYYYMMDD');
      this.endDate = moment(date[1]).format('YYYYMMDD');
      this.statisticsRadio2 = ''
      this.integrationData()
    },
  },
};
</script>

<style lang="scss" scoped>
.module {
  padding: 14px;
}
.content {
  border: 1px solid #39517f;
  padding: 14px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}
.group_table {
  display: flex;
  justify-content: space-around;
}
.title {
  line-height: 18px;
  border-left: 5px solid #08b0f0;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.table {
  margin-top: 10px;
  border: 1px solid #39517f;
}
.table_echarts {
  .pie_echarts {
    width: 100%;
  }
}
#pie1 {
  width: 100%;
  flex: 1;
  height: 220px;
}
#pie2 {
  width: 100%;
  flex: 1;
  height: 220px;
}
</style>
